<script setup lang="ts">
import {CirclePlusFilled, House} from "@element-plus/icons-vue";
import {onMounted, provide, ref} from "vue";
import {getGenerator} from "@/utils/generator";
import {useLoginStore} from "@/stores/userStore";
import router from "@/router";

const userStore = useLoginStore()
const data = ref([])
const select = ref({
  current: 1,
  description: '',
  pageSize: 12,
  sortField: 'createTime',
  sortOrder: 'descend',
  name: '',
  searchText: ''
})
const search = ref({
  current: 1,
  pageSize: 12,
  sortField: 'createTime',
  sortOrder: 'descend',
  id: ''
})

const reset = () => {
  select.value.description = ''
  select.value.name = ''
  select.value.searchText = ''
}

const submit = async () => {
  search.value.id = userStore.id
  const res = await getGenerator(search.value)
  data.value = res.data.data.records
  provide('data', data.value)
}

onMounted(() => {
  submit()
})
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- Header -->
      <el-header class="main-header">
        <div class="header-brand">
          <img src="@/assets/logo.svg" alt="鱼籽代码生成器" class="logo">
          <h1 class="title">鱼籽代码生成器</h1>
        </div>

        <nav class="nav-container">
          <el-button link class="nav-item" @click="router.push('/main')">
            <el-icon><House /></el-icon>
            <span>主页</span>
          </el-button>
          <el-button link class="nav-item" @click="router.push('/add')">
            <el-icon><CirclePlusFilled /></el-icon>
            <span>创建生成器</span>
          </el-button>
        </nav>

        <div class="user-actions">
          <el-button type="primary" plain class="mr-2">
            <router-link to="/login" class="action-link">登录</router-link>
          </el-button>
          <el-button type="success" plain>
            <router-link to="/register" class="action-link">注册</router-link>
          </el-button>
        </div>
      </el-header>

      <!-- Main Content -->
      <el-main class="main-content">
        <!-- Search Filter -->
        <div class="filter-container">
          <el-input
            v-model="select.searchText"
            placeholder="搜索代码生成器"
            class="search-input"
            clearable
          >
            <template #append>
              <el-button type="primary" icon="Search" @click="submit">搜索</el-button>
            </template>
          </el-input>

          <div class="advanced-filters">
            <el-input v-model="select.name" placeholder="名称" class="filter-item" />
            <el-input v-model="select.description" placeholder="描述" class="filter-item" />
            <el-button type="info" @click="reset" >重置</el-button>
          </div>
        </div>

        <!-- Generator List -->
        <el-scrollbar class="generator-scroll">
          <ul class="generator-list">
            <li
              v-for="item in data"
              :key="item.id"
              class="generator-item"
              @click="router.push(`/detail/${item.id}`)"
            >
              <el-card class="generator-card" shadow="hover">
                <template #header>
                  <div class="card-header">
                    <h3 class="generator-title">{{ item.name }}</h3>
                    <el-tag type="info" size="small">{{ item.createTime }}</el-tag>
                  </div>
                </template>
                <el-image
                  :src="item.picture"
                  fit="cover"
                  class="generator-image"
                  lazy
                />
                <p class="generator-desc">{{ item.description }}</p>
                <div class="tag-container">
                  <el-tag
                    v-for="(tag, index) in item.tags"
                    :key="index"
                    type="primary"
                    effect="plain"
                    size="small"
                    class="tag-item"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </el-card>
            </li>
          </ul>
        </el-scrollbar>
      </el-main>

      <!-- Footer (保持原样) -->
      <el-footer class="footer">
        <div class="footer-content">
          <a href="https://gitee.com/wangfenghuan3399/yuzi-generator" target="_blank" class="footer-link">
            <img src="@/assets/gitee.svg" alt="Gitee开源仓库" class="gitee-logo">
            <span class="footer-text">鱼籽代码生成器-Gitee 开源仓库</span>
          </a>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.common-layout {
  height: 100vh;
  background: #f8fafc;

  .main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding: 0 40px;
    height: 64px;

    .header-brand {
      display: flex;
      align-items: center;
      gap: 12px;

      .logo {
        height: 40px;
        transition: transform 0.3s ease;

        &:hover {
          transform: rotate(-8deg);
        }
      }

      .title {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #2c3e50;
        letter-spacing: 0.5px;
      }
    }

    .nav-container {
      display: flex;
      gap: 24px;
      margin-left: 40px;

      .nav-item {
        padding: 8px 16px;
        border-radius: 6px;
        transition: all 0.3s ease;

        &:hover {
          background: #f5f7fa;
          color: #409eff;

          span {
            transform: translateX(2px);
          }
        }

        span {
          margin-left: 8px;
          font-weight: 500;
          transition: transform 0.3s ease;
        }
      }
    }

    .user-actions {
      .action-link {
        color: inherit;
        text-decoration: none;
        font-weight: 500;
        padding: 0 8px;
      }
    }
  }

  .main-content {
    padding: 24px 10%;

    .filter-container {
      margin-bottom: 24px;

      .search-input {
        width: 360px;
        margin-bottom: 16px;

        :deep(.el-input-group__append) {
          background: var(--el-color-primary);
          color: white;
        }
      }

      .advanced-filters {
        display: flex;
        gap: 16px;
        align-items: center;

        .filter-item {
          width: 200px;
        }
      }
    }

    .generator-scroll {
      height: calc(100vh - 240px);

      .generator-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 24px;
        padding: 8px;

        .generator-item {
          list-style: none;
          cursor: pointer;
          transition: transform 0.3s ease;

          &:hover {
            transform: translateY(-4px);
          }

          .generator-card {
            height: 100%;
            border-radius: 12px;

            :deep(.el-card__header) {
              padding: 12px 20px;
              background: #fafbfc;
            }

            .card-header {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .generator-title {
                margin: 0;
                font-size: 16px;
                color: #2c3e50;
              }
            }

            .generator-image {
              width: 100%;
              height: 180px;
              border-radius: 6px;
            }

            .generator-desc {
              margin: 12px 0;
              color: #666;
              font-size: 14px;
              line-height: 1.5;
              height: 60px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }

            .tag-container {
              display: flex;
              flex-wrap: wrap;
              gap: 8px;

              .tag-item {
                border-radius: 4px;
              }
            }
          }
        }
      }
    }
  }

  .footer {
    background: transparent;
    padding: 20px 0;

    &-content {
      .footer-link {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);

          .footer-text {
            color: #409EFF;
          }

          .gitee-logo {
            filter: brightness(1.2);
          }
        }
      }

      .footer-text {
        color: #7f8c8d;
        font-size: 14px;
        transition: color 0.3s ease;
      }

      .gitee-logo {
        width: 28px;
        height: 28px;
        transition: all 0.3s ease;
      }
    }
  }
}
</style>
